<template>
  <div class="home">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide 
        v-for="item in banners" 
        :key="item.app_store_id"
        >
        <img class="banner" v-lazy="item.banner_pic" @click="skip(item)" >
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    <div class="adverts">
      <div class="advert-list">
        <advert-item 
          v-for="(item, index) in adverts" 
          :key="index" 
          :data="item"></advert-item>
      </div>
    </div>
    <div class="title">推荐贷款</div>
    <div class="contents">
      <ad-item 
        v-for="(item, index) in ads" 
        :key="index" 
        :data="item"
        >
      </ad-item>
    </div>
    <!-- <footer>
      <p>白胡子信息科技（上海）有限公司</p>
      <p>沪ICP备16005190号-1</p>
    </footer> -->
  </div>
</template>
<script>
import AdvertItem from '@/components/AdvertItem'
import AdItem from '@/components/AdItem'
export default {
  components: {
    AdvertItem,
    AdItem
  },
  data () {
    return {
      url: '',
      data: {},
      swiperOption: {
        autoplay: 3000,
        pagination: '.swiper-pagination',
        mousewheelControl: true,
        observeParents: true
      }
    }
  },
  created () {
    this.$api.get('ads/index/test_register').then((res) => {
      this.data = res.data
    })
  },
  computed: {
    banners () {
      return this.data.ad_banner_vos || []
    },
    adverts () {
      return this.data.ad_success_cases || []
    },
    ads () {
      return this.data.ad_list_vos || []
    }
  },
  methods: {
    skip (item) {
      this.$root.fnAdStat(`banner-${item.title}`)
      this.$api.get(item.url).then(data => {
        console.log(data)
      })
      this.url = item.url
      // this.$router.push({ name: 'ad', params: { url: item.url } })
      // window.location.href = item.url
    }
  }
}
</script>

<style lang="scss">
@import '~@/scss/base.scss';
// .nav{
//   background: $nav-bg;
//   color: white;
//   padding: $base-padding;
//   font-size: $nav-size;
// }
.swiper-container{
  height: calc(100vw * 336 / 750);
}
.swiper-pagination-bullet-active{
  background: white;
}
.banner {
  width: 100%;
}
.title {
  text-align: left;
  padding: 10px;
  font-size: $title-size;
}
.adverts{
  position: relative;
  height: 80px;
  overflow: hidden;
}
.advert-list{
  animation: animation-list 30s linear infinite;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
@keyframes animation-list {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  100% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
  }
}
</style>

